<!--
 * @Author: byron
 * @Date: 2021-10-01 15:41:23
 * @LastEditTime: 2022-01-18 10:40:00
-->
<template>
    <div class="search-detail" ref="searchRef">
        <div class="header-warp">
            <div class="header-title">
                <span class="title">{{ keywords }}</span>
                <span class="result">找到 {{ total }} 个结果</span>
            </div>
            <div class="tab-warp">
                <Tabs
                    :tabs="tabs"
                    tabClass="search-tab-item"
                    activeClass="router-active"
                />
            </div>
        </div>
        <router-view :class="routerViewClass"></router-view>
    </div>
</template>

<script>
const centerRoutes = ['searchmvs', 'searchplaylists']
const tabs = [
    {
        title: '单曲',
        key: 'songs',
        to: 'songs',
    },
    {
        title: '歌单',
        key: 'playlists',
        to: 'playlists',
    },
    {
        title: 'MV',
        key: 'mvs',
        to: 'mvs',
    },
]

export default {
    provide() {
        return {
            searchRoot: this,
        }
    },
    components: {},
    props: ['keywords'],
    data() {
        return { total: 0, songs: [] }
    },
    watch: {},
    computed: {
        routerViewClass() {
            return centerRoutes.find((route) => {
                return route === this.$route.name
            })
                ? 'router-view-class'
                : ''
        },
    },
    methods: {
        bindTotal(total) {
            this.total = total
        },
    },
    created() {
        this.tabs = tabs
    },
    mounted() {},
}
</script>
<style lang="scss" scoped>
.search-detail {
    .header-warp {
        padding: 0px 14px;
        margin-bottom: 2px;
        .header-title {
            margin-bottom: 10px;
            background-color: var(--body-bgcolor);
            .title {
                font-weight: 700;
                font-size: 24px;
            }
            .result {
                margin-left: 10px;
                color: var(--font-color-grey);
            }
        }
    }
    // /deep/.search-tab-item {
    //     font-size: 16px;
    //     color: var(--tab-item-color);
    //     &:hover {
    //         color: var(--tab-item-active-color);
    //     }
    // }
    // /deep/.router-active {
    //     color: var(--tab-item-active-color);
    //     border-bottom: 3px solid var(--font-title-color);
    // }

    .router-view-class {
        max-width: 1000px;
        margin: auto;
    }
}
</style>
